<template>
  <div class="chat">
    <div class="chat-search">
      <van-search
        v-model="value"
        show-action
        placeholder="输入昵称搜索店员"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch" class="icon iconfont icon-ling bell"></div>
        </template>
      </van-search>
    </div>
    <div class="chat-chose">
      <van-dropdown-menu>
        <van-dropdown-item class="intelligence" v-model="value1" :options="option1" />
        <van-dropdown-item class="sex"  v-model="value2" :options="option2" />
        <van-dropdown-item class="grade" v-model="value3" :options="option3" />
      </van-dropdown-menu>
    </div>
    <div class="chat-content">
      <div class="chat-list" @click="chat_detail">
        <div class="chat-status-grade">
          <div class="chat-grade icon iconfont icon-dengji-A">
           特级
          </div>
          <div class="chat-status">
            <span class="icon iconfont icon-dian chat-status-list">
              <span class="chat-status-list-word">可文字</span>
            </span>
            <span class="icon iconfont icon-dian chat-status-list">
              <span class="chat-status-list-word">在线</span>
            </span>
          </div>
        </div>
        <div class="chat-headImg-wrapper">
          <img src="@/assets/img/head.jpg" alt="" class="chat-headImg">
        </div>
        <div class="chat-main">
            <div class="chat-nickname-voice">
              <div class="chat-nickname">大V超人</div>
              <div class="chat-voice">录音</div>
            </div>
            <div class="chat-sex-huaban">
              <van-tag round type="primary">
                <span class="sex icon  iconfont icon-female">21</span>
              </van-tag>
              <van-tag round type="primary">
                <span class="huaban icon iconfont icon-qianbi">16奇妙币起</span>
              </van-tag>
            </div>
          <div class="chat-main-tag">
            <van-tag round type="primary">情感陪聊</van-tag>
            <van-tag round type="primary">情感陪聊</van-tag>
          </div>
        </div>
      </div>
      <div class="chat-list">
        <div class="chat-status-grade">
          <div class="chat-grade icon iconfont icon-dengji-C">
            中级
          </div>
          <div class="chat-status">
            <span class="icon iconfont icon-dian chat-status-list">
              <span class="chat-status-list-word">可文字</span>
            </span>
            <span class="icon iconfont icon-dian chat-status-list">
              <span class="chat-status-list-word">在线</span>
            </span>
          </div>
        </div>
        <div class="chat-headImg-wrapper">
          <img src="@/assets/img/head.jpg" alt="" class="chat-headImg">
        </div>
        <div class="chat-main">
          <div class="chat-nickname-voice">
            <div class="chat-nickname">大V超人</div>
            <div class="chat-voice">录音</div>
          </div>
          <div class="chat-sex-huaban">
            <van-tag round type="primary">
              <span class="sex icon icon iconfont icon-female">21</span>
            </van-tag>
            <van-tag round type="primary">
              <span class="huaban icon iconfont icon-qianbi">16奇妙币起</span>
            </van-tag>
          </div>
          <div class="chat-main-tag">
            <van-tag round type="primary">情感陪聊</van-tag>
            <van-tag round type="primary">情感陪聊</van-tag>
          </div>
        </div>
      </div>
      <div class="chat-list">
        <div class="chat-status-grade">
          <div class="chat-grade icon iconfont icon-dengji-B">
            高级
          </div>
          <div class="chat-status">
            <span class="icon iconfont icon-dian chat-status-list">
              <span class="chat-status-list-word">可文字</span>
            </span>
            <span class="icon iconfont icon-dian chat-status-list">
              <span class="chat-status-list-word">在线</span>
            </span>
          </div>
        </div>
        <div class="chat-headImg-wrapper">
          <img src="@/assets/img/head.jpg" alt="" class="chat-headImg">
        </div>
        <div class="chat-main">
          <div class="chat-nickname-voice">
            <div class="chat-nickname">大V超人</div>
            <div class="chat-voice">录音</div>
          </div>
          <div class="chat-sex-huaban">
            <van-tag round type="primary">
              <span class="sex icon icon iconfont icon-female">21</span>
            </van-tag>
            <van-tag round type="primary">
              <span class="huaban icon iconfont icon-qianbi">16奇妙币起</span>
            </van-tag>
          </div>
          <div class="chat-main-tag">
            <van-tag round type="primary">情感陪聊</van-tag>
            <van-tag round type="primary">情感陪聊</van-tag>

          </div>
        </div>
      </div>
      <div class="chat-list">
        <div class="chat-status-grade">
          <div class="chat-grade icon iconfont icon-dengji-B">
            高级
          </div>
          <div class="chat-status">
            <span class="icon iconfont icon-dian chat-status-list">
              <span class="chat-status-list-word">可文字</span>
            </span>
            <span class="icon iconfont icon-dian chat-status-list">
              <span class="chat-status-list-word">在线</span>
            </span>
          </div>
        </div>
        <div class="chat-headImg-wrapper">
          <img src="@/assets/img/head.jpg" alt="" class="chat-headImg">
        </div>
        <div class="chat-main">
          <div class="chat-nickname-voice">
            <div class="chat-nickname">大V超人</div>
            <div class="chat-voice">录音</div>
          </div>
          <div class="chat-sex-huaban">
            <van-tag round type="primary">
              <span class="sex icon icon iconfont icon-female">21</span>
            </van-tag>
            <van-tag round type="primary">
              <span class="huaban icon iconfont icon-qianbi">16奇妙币起</span>
            </van-tag>
          </div>
          <div class="chat-main-tag">
            <van-tag round type="primary">情感陪聊</van-tag>
            <van-tag round type="primary">情感陪聊</van-tag>

          </div>
        </div>
      </div>
      <div class="chat-list">
        <div class="chat-status-grade">
          <div class="chat-grade icon iconfont icon-dengji-C">
            中级
          </div>
          <div class="chat-status">
            <span class="icon iconfont icon-dian chat-status-list">
              <span class="chat-status-list-word">可文字</span>
            </span>
            <span class="icon iconfont icon-dian chat-status-list">
              <span class="chat-status-list-word">在线</span>
            </span>
          </div>
        </div>
        <div class="chat-headImg-wrapper">
          <img src="@/assets/img/head.jpg" alt="" class="chat-headImg">
        </div>
        <div class="chat-main">
          <div class="chat-nickname-voice">
            <div class="chat-nickname">大V超人</div>
            <div class="chat-voice">录音</div>
          </div>
          <div class="chat-sex-huaban">
            <van-tag round type="primary">
              <span class="sex icon icon iconfont icon-female">21</span>
            </van-tag>
            <van-tag round type="primary">
              <span class="huaban icon iconfont icon-qianbi">16奇妙币起</span>
            </van-tag>
          </div>
          <div class="chat-main-tag">
            <van-tag round type="primary">情感陪聊</van-tag>
            <van-tag round type="primary">情感陪聊</van-tag>
          </div>
        </div>
      </div>
    </div>
      <user-footer></user-footer>
  </div>
</template>

<script>
    import UserFooter from '@/components/UserFooter'
    import Vue from 'vue';
    import { Search , Toast, DropdownMenu, DropdownItem, Tag } from 'vant';

    Vue.use(Search);
    Vue.use(Toast);
    Vue.use(DropdownMenu);
    Vue.use(DropdownItem);
    Vue.use(Tag);
    export default {
        name: "Index",
        components: {
          UserFooter
      },
      data: function () {
        return {
          value: '',
          value1: '0',
          value2: '0',
          value3: '0',
          option1: [
            { text: '智能排序', value: '0' },
            { text: '全部', value: '1' },
            { text: '情感陪聊', value: '2' },
            { text: '树洞倾诉', value: '3' },
            { text: '普通聊天', value: '4' },
          ],
          option2: [
            { text: '性别', value: '0' },
            { text: '男', value: '1' },
            { text: '女', value: '2' },
          ],
          option3: [
            { text: '等级', value: '0' },
            { text: '不限等级', value: '1' },
            { text: '中级', value: '2' },
            { text: '高级', value: '3' },
            { text: '特级', value: '4' },
          ],
        };
      },
      methods: {
        onSearch(val) {
          Toast(val);
        },
        chat_detail(){
          this.$router.push({path:'/clerkdata'})
        }
      }
    }
</script>

<style scoped lang="stylus">
  @import '~style/mixins.styl'
  @import '~style/varibles.styl'
  .chat
    .chat-content
      padding .2rem
      between-align-items()
      flex-wrap wrap
      margin-bottom 1.5rem
      .chat-list
        background-color #F3F0FB
        border-radius  .15rem
        width calc(50%  - .1rem)
        box-shadow  4px 4px 8px  $DefaultColor
        margin-bottom .2rem
        .chat-status-grade
          padding .2rem
          between-align-items()
          .chat-grade
            font-size .1rem
            color #333
          .chat-status
            .chat-status-list
              font-size .1rem
              color $DefaultColor
              .chat-status-list-word
                color #333
                font-size .2rem
        .chat-headImg-wrapper
          width 100%
          overflow hidden
          .chat-headImg
            width 100%
        .chat-main
          padding .2rem .1rem
          between-align-items()
          flex-direction column
          .chat-nickname-voice
            width 100%
            font-size .5rem
            color #333
            between-align-items()
            .chat-nickname
              width 2rem
              word-break keep-all /* 不换行 */
              white-space nowrap /* 不换行 */
              overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
              text-overflow ellipsis /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
              font-size .3rem
              padding .2rem 0
            .chat-voice
              font-size .3rem
          .chat-sex-huaban
            width 100%
            left()
            padding-bottom .2rem
            font-size .12rem
            .van-tag
              border none
              .sex,.huaban
                font-size .12rem
                border none
          .chat-main-tag
            width 100%
            left()
            flex-wrap nowrap
            line-height .15rem
            .van-tag
              margin-right .2rem
              background-color #F3F0FB
              border 1px solid #C8BFE4
              color #C8BFE4
              font-size .12rem
              margin-bottom .1rem
</style>
<style>
  .van-dropdown-menu__title--active{
    color: #333;
  }
  .van-dropdown-item__option--active .van-dropdown-item__icon{
    color: #C8BFE4;
  }
  .chat-sex-huaban .van-tag--primary{
    background-color: #F3F0FB;
    border: 1px solid #C8BFE4;
    color: #C8BFE4;
  }
  .chat-chose .van-dropdown-menu__title::after{
    border-color: transparent transparent #000 #000;
  }
  .chat-search .bell{
    color: #CED1EF;
    font-size: .5rem;
  }
  .chat-search .van-search__content{
    border-radius: .5rem;
  }
  .chat-chose .van-cell{
    width: 3rem;
  }
  .chat-chose .van-popup{
    background-color: transparent;
  }
  .chat-chose .van-dropdown-item__option--active{
    background-color: #CED1EF;
    color: #fff;
  }
  .chat-chose .van-dropdown-item__option{
    text-align: center;
  }

  .chat-chose .intelligence .van-cell{
    left: .3rem;
  }
  .chat-chose .sex .van-cell{
    left: 2.8rem;
  }
  .chat-chose  .grade .van-popup--top{
    right: 0 !important;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 3rem;
    left: unset;
  }
  .chat-chose .grade .van-dropdown-item__option{
    text-align: center;
  }
  .chat-chose .grade .van-cell{
    right:.3rem;
  }
</style>
